<template>
    <Dialog :app-dialog="appDialog">
        <div v-if="showGroup && !showTagName" class="group_name">
            您正在批量更换标签：{{
                groupData.labelNames.length > 3
                    ? groupData.labelNames.slice(0, 3).join('、') + '等' + groupData.labelNames.length + '个标签的分组'
                    : groupData.labelNames.slice(0, 3).join('、')
            }}。
        </div>
        <el-form ref="formRef" class="demo_dynamic" :model="labelForm">
            <el-form-item
                v-if="showGroup"
                label="标签分组"
                prop="groupId"
                :rules="[{ required: true, message: '标签分组不能为空', trigger: 'change' }]">
                <el-select v-model="labelForm.groupId" class="select-corp" placeholder="请选择标签分组">
                    <el-option
                        v-for="item in groupData.userTagNameList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        :disabled="item.disabled">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                v-if="showTagName"
                prop="name"
                label="标签内容"
                :rules="[{ required: true, message: '标签内容不能为空', trigger: 'blur' }]">
                <el-input
                    v-model="labelForm.name"
                    class="group_data_name"
                    maxlength="15"
                    show-word-limit
                    placeholder="请输入标签内容"></el-input>
            </el-form-item>
        </el-form>
    </Dialog>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import Dialog from '@/components/Dialog.vue';
import { ElInput, ElForm, ElMessage } from 'element-plus';
import { userTagGroupList } from '@/api/employe/label';
const formRef = ref<InstanceType<typeof ElForm>>();
import bus from '@/utils/bus';
const emit = defineEmits(['submit']);
const groupData = defineProps(['userTagNameList', 'defaultId', 'labelNames', 'groupId']);

const showGroup = ref(true);
const showTagName = ref(true);
const group_list = ref([]);
const defaultProps = {
    checkStrictly: true,
    emitPath: false,
    label: 'name',
    value: 'id'
};
const cancelHandel = () => {
    appDialog.visible = false;
    showGroup.value = true;
    showTagName.value = true;
    labelForm.name = '';
};
// 保存标签
const submitHandel = () => {
    formRef.value.validate(async (valid: any) => {
        if (valid) {
            try {
                emit('submit', labelForm);
            } catch (e) {
                // to do
            }
        }
    });
};

const appDialog = reactive({
    visible: false,
    title: `添加标签`,
    width: '400px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存'
});
// 新建分组
const labelForm = reactive({
    name: '',
    groupId: ''
});
const Group = (data: any) => {
    labelForm.groupId = data.id;
};
bus.on('submit', Group);
defineExpose({
    appDialog,
    showGroup,
    showTagName,
    labelForm,
    cancelHandel
});

watch(
    () => appDialog.visible,
    () => {
        labelForm.groupId = groupData.defaultId == 0 ? groupData.groupId : groupData.defaultId;
    }
);
</script>
<style lang="scss" scoped>
.group_name {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 15px;
}

.group_data_name {
    width: 220px;
}

.mr15 {
    margin-right: 15px;
}

.demo_dynamic {
    margin-top: 14px;

    :deep(.el-select) {
        width: 100%;
    }

    :deep(.el-input) {
        width: 100%;
    }
}
</style>
